<template>
	<u-navbar :leftIconSize="42" titleStyle="font-size:20px;font-weight:600" :autoBack="true" :placeholder='true'
		title="发票管理">
	</u-navbar>
	<view class="padding-30rpx white-bg invoice-content" style="display: flex;justify-content: center;align-items: center;padding-bottom: 12px">
    <Tabs :list="data.tabs" @tabChange="tabChange" :active="data.selectedTabIndex" :tabStyle="{'padding': '0 40px'}"></Tabs>
	</view>
  <empty :config="{text: '您还没有开票记录', icon: emptyRecordBg}" v-if="data.list.length === 0 && data.tabType === 'record'" />
  <empty :config="{text: '您还没有企业发票', icon: emptyTitleBg}" v-if="data.titleList.length === 0 && data.tabType === 'title'" />
  <view v-else class="padding-30rpx">
    <scroll-view v-if="data.tabType=='record'" :scroll-top="0" scroll-y="true" class="scroll-Y" @scrolltolower="lower">
      <view class="padding-30rpx white-bg scroll-item"
            style="border-radius: 4px;font-size: 14px;margin-bottom: 15px;border-radius: 8px; font-family: 'PingFang SC',sans-serif"
            v-for="(item,index) in data.list">
        <view class="flex-jc-s-b" style="color:#333333">
          <view class="" style="font-weight: bold;">
            <text :user-select="true">订单编号：{{item.orderNum}}</text>
          </view>
          <!-- 状态 -->
          <text :style="item.statusCode === 'invalid' || item.statusCode === 'reapplied'? {color: '#EB5940'} : ''">{{data.statusTypeMap[item.statusCode]}}</text>
        </view>
        <view class="" style="margin:16px 0;font-size: 14px;color: #666666;">
          <text>创建时间：</text>
          <text style="font-size: 13px">{{item.createTime}}</text>
        </view>
        <view class="" style="font-size: 14px;color: #666666;">
          <text>发票抬头：</text>
          <text style="font-size: 13px">{{item.title}}</text>
        </view>
        <view class="flex-jc-end" style="margin: 15px 0;">
          <view class="" style="color: #EB5940;font-size: 15px;">
            <text style="color:#333333">开票金额：</text>
            <text style="font-size: 12px;">￥</text>
            <text style="font-size: 17px;font-weight: bold;font-family: 'DIN Alternate',sans-serif">{{item.price}}</text>
          </view>
        </view>
        <view class="flex-jc-end">
          <u-button @click="goDetail(item)" :customStyle="{width:'77px',height: '29px', margin:'0'}"
                    shape="circle">
            <text style="font-size: 13px; white-space: nowrap">查看详情</text>
          </u-button>
        </view>
      </view>
    </scroll-view>
    <!-- 抬头 -->
    <view class="" v-if="data.tabType=='title'">
      <view class="padding-30rpx white-bg" v-for="(item,index) in data.titleList"
            style="margin-bottom: 15px;position: relative;border-radius: 8px; font-family: 'PingFang SC',sans-serif">
        <view class="right-icon" style="font-size: 12px;">企业发票</view>
        <view class="flex-jc-s-b">
          <view class="flex-al-center">
            <view class="flex-column"
                  style="color: #666666;font-size: 12px;align-items: flex-start;margin-left: 5px;">
              <view>
                <text style="font-size: 15px;font-weight: 500;color:#333333;margin-right: 5px;">{{item.title}}</text>
                <text v-if="item.defaultFlag === 1" style="font-size: 10px;color: #409EFF;border: 1px solid;border-radius: 3px;padding: 0 4px;text-align: center">默认</text>
              </view>
              <text style="margin-top: 7px;">{{item.taxIdentificationNumber}}</text>
              <text v-if="item.address" style="margin-top: 7px;">{{item.address}}</text>
              <text v-if="item.mobile" style="margin-top: 7px;">{{item.mobile}}</text>
              <text v-if="item.bankName" style="margin-top: 7px;">{{item.bankName}}</text>
              <text v-if="item.bankAccount" style="margin-top: 7px;">{{item.bankAccount}}</text>
            </view>
          </view>
          <u-icon @click="goEdit(item)"
                  :color="'#939393'" size="40" name="edit-pen"></u-icon>
        </view>
      </view>
    </view>
	</view>
	<view class="" style="height: 80px;"></view>
	<view class="comfig-button flex-center">
		<u-button v-if="data.tabType === 'title'" @click="goAdd" :customStyle="{'width':'345px',margin:'0'}"
			type="primary" shape="circle" text="添加企业发票"></u-button>
	</view>
</template>

<script setup>
	import Tabs from '@/pages/components/tabs.vue'
	import { onMounted, reactive, nextTick } from "vue";
  import { onLoad } from "@dcloudio/uni-app";
  import {invoicePagingApi, titleListApi} from './const'
  import empty from '@/pages/components/empty.vue'
  import emptyRecordBg from "@/static/image/mine/empty-record.png"
  import emptyTitleBg from "@/static/image/mine/empty-title.png"
  import pageRoute from '../../utils/pageRoute'
	const data = reactive({
    list: [],
    titleList: [],
    request: {
      "pageDomain": {
        "pageNum": "1",
        "pageSize": "3",
        "orderByColumn": "",
        "isAsc": "",
        "reasonable": ""
      }
    },
    resultTotal: 99999,
		tabType: 'record',
    selectedTabIndex: 0,
		tabs: [
			{ name: '申请记录',
        type: 'record'
      },
			{
				name: '抬头管理',
				type: 'title'
			},
		],
    statusTypeMap: {
      effective: '已开票',
      invalid: '已作废',
      non: '申请中',
      reapplied: '已作废'
    }
	})
	const tabChange = (index, item) => {
    data.request.pageDomain.pageNum = 1
    data.resultTotal = 99999
    data.list = []
    data.titleList = []
		data.tabType = item.type
    data.selectedTabIndex = index
    switchTab(data.tabType)
	}
  onLoad((options) => {
    uni.$on('switchTab',switchTab)
    data.tabType = options.type || 'record'
  })
  onMounted(() => {
    switchTab(data.tabType)
  })
  const paging = () => {
    invoicePagingApi(data.request).then((res) => {
      data.list.push(...res.rows)
      data.resultTotal = res.total || 0
    }).catch(() => {
      data.resultTotal = 0
    })
  }
  const getTitleList = () => {
    titleListApi().then((res) => {
      data.titleList.push(...res.rows)
      data.resultTotal = res.total || 0
    }).catch(() => {
      data.resultTotal = 0
    })
  }
  const switchTab = (type) => {
    data.list = []
    data.titleList = []
    data.tabType = type || 'record'
    if(data.tabType === 'record') {
      paging()
    } else if(data.tabType === 'title') {
      getTitleList()
    }
  }
  const goDetail = (item) => {
    pageRoute.route('pages/invoice/detail', {id:item.id})
  }
  const goEdit = (item) => {
    pageRoute.route('pages/invoice/add-update', {type:'update', id: item.id})
  }
  const goAdd = () => {
    pageRoute.route('pages/invoice/add-update')
  }
  function lower(e) {
    if ((data.resultTotal <= data.list.length) || data.resultTotal === 0) { return }
    data.request.pageDomain.pageNum++
    paging()
  }
</script>
<style lang="scss">
	.invoice-content {
		.tabs-item {}
		.tabs-content {
			justify-content: space-around;
		}
	}
</style>
<style lang="scss" scoped>
	.comfig-button {
		position: fixed;
		width: 100%;
		left: 0;
		bottom: 30px;
	}
	.right-icon {
		width: 67px;
		background: #409EFF;
		border-radius: 0px 9px 0px 9px;
		color: #fff;
		text-align: center;
		padding: 2px;
		position: absolute;
		top: 0;
		right: 0;
	}
  .scroll-Y {
    height: calc(100vh - 74px - 90px);
  }
  .scroll-item {
    margin-top: 15px;
    display: flex;
    flex-direction: column;
  }
  .scroll-view-item {
    height: 300rpx;
    line-height: 300rpx;
    text-align: center;
    border: 1px solid red;
    font-size: 36rpx;
  }
</style>
